<template>
  <div class="login-container">
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      :background-color="backgroundColor"
      text-color="#fff"
      :active="activeIndex"
      active-text-color="#ffd04b">
      <el-menu-item v-for="item in navList" :key="item.index" :index="item.index" :class="{'is-active':false}">{{ item.label }}</el-menu-item>
    </el-menu>
    <el-carousel :interval="4000" arrow="always" height="600px">
      <el-carousel-item v-for="item in 4" :key="item">
        <h3>{{ item }}</h3>
      </el-carousel-item>
    </el-carousel>
    <div class="companyDescribe"><!--   850   -->
      <el-row type="flex" justify="center">
        <el-col class="left" :span="8">
          <h1>公司介绍</h1>
          <p>ABOUT</p>
          <h3>医惠科技（沈阳）有限公司</h3>
          <div class="describeContent">
            医惠科技，一直以“简约智慧医疗”为理念，以“病人安全、医疗质量、临床效率和费用控制”为目标，以物联网、大数据、人工智能、区块链等核心技术为依托，实现从居民到医护人员全人全程可及连贯的智慧医疗信息服务。
            <br>
            医惠以技术创新为核心引擎，拥有1000多名专业技术人才，专利申请总量近千件，与华为、华三、IBM、Intel等多家国际知名500强企业达成长期战略合作伙伴，先后承担、参与“十一五”国家科技支撑计划重点项目、“十二五”国家科技重大专项、“十三五”国家重点研发计划“精准医学”重点专项等共计15项国家重大专项课题研究。同时，医惠是国家卫计委医院信息互联互通标准制定的核心单位，参与制定卫计委标准8项。目前，医惠已经成功实现SNOMED CT本体术语体系和中医药临床术语体系的融合，制定、申报并成功通过了ISO/TC 249《中文中西医临床术语体系框架》等多项医疗信息化国际标准，实现了中国在医疗国际标准领域新的突破。
          </div>
        </el-col>
        <el-col class="right" :span="8">
          <div class="imgCanvas">
            <img src="../../assets/ewellsyBuild.png">
          </div>
          <div class="shadowCanvas"></div>
        </el-col>
      </el-row>
      <div class="describeBottomBox">
        <el-row>
          <el-col :span="6" v-for="item in describeList" :key="item.label">
            <div class="text">
              <span>
                {{ item.text }}
              <div class="logo">{{ item.logo }}</div>
              </span>
            </div>
            <div class="label">{{ item.label }}</div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="companyDevelop"><!--   1000   -->
      <h1>公司发展</h1>
      <time-line></time-line>
    </div>
    <div class="doctors"><!--   950   -->
      <Doctors></Doctors>
    </div>
    <div class="companyAddr"><!--   700   -->
      <Address></Address>
    </div>
    <div class="loginBtn" @click="toLogin">
      <i class="el-icon-user"></i>
      &nbsp;
      <span class="text">登陆</span>
    </div>
    <do-login :switch-flag="loginDialog" @switchOff="loginDialog=false"></do-login>
  </div>
</template>

<script>
import TimeLine from "@/views/login/components/TimeLine"
import Doctors from "@/views/login/components/Doctors"
import Address from "@/views/login/components/Address"
import DoLogin from "@/views/login/components/DoLogin"

export default {
  name: 'Login',
  components: { TimeLine, Doctors, Address, DoLogin },
  data() {
    return {
      navList:[
        { index: '1', label: '首页' },
        { index: '2', label: '公司简介' },
        { index: '3', label: '发展历程' },
        { index: '4', label: '医师介绍' },
        { index: '5', label: '公司地址' }
      ],
      activeIndex: '1',
      backgroundColor: 'transparent',
      describeList: [
        { text: '2018', label: '成立医惠沈阳', logo: '年' },
        { text: '9+', label: '公司面积', logo: 'm²' },
        { text: '3', label: '入驻企业', logo: '+' },
        { text: '10', label: '服务企业', logo: '+' }
      ],
      loginDialog: false
    }
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll)
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.handleScroll)
  },
  methods: {
    handleScroll() {
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop
      if (scrollTop >= 0) {
        this.backgroundColor = `rgba(84,92,100,${ scrollTop / (scrollTop + 50) })`
      } else if (scrollTop == 0) {
        this.backgroundColor = "transparent"
      }
      if (scrollTop <= 270) {
        this.activeIndex = '1'
      }
      if (scrollTop >= 540) {
        this.activeIndex = '2'
      }
      if (scrollTop >= 1350) {
        this.activeIndex = '3'
      }
      if (scrollTop >= 2350) {
        this.activeIndex = '4'
      }
      if (scrollTop >= 3000) {
        this.activeIndex = '5'
      }

    },
    handleSelect(key, keyPath) {
      switch (key) {
        case '1':
          document.documentElement.scrollTop = 0
          break
        case '2':
          document.documentElement.scrollTop = 540
          break
        case '3':
          document.documentElement.scrollTop = 1390
          break
        case '4':
          document.documentElement.scrollTop = 2390
          break
        case '5':
          document.documentElement.scrollTop = 3340
          break
        default:
          break
      }
    },
    toLogin() {
      this.loginDialog = true
    }
  }
}
</script>

<style lang="scss">
html,body {
  scroll-behavior: smooth;
}
.el-menu {
  position: fixed;
  top: 0px;
  z-index: 999;
  width: 100%;
  .el-menu-item {
    width: 6%;
    text-align: center;
  }
}
.el-menu-item:nth-of-type(1) {
  margin-left: 50%;
}
.el-menu.el-menu--horizontal {
  border-bottom: none !important;
}
.el-menu-item {
  background-color: transparent !important;
}
.el-menu .el-menu-item:hover {
  background-color:transparent !important;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 600px;
  margin: 0 auto;
  text-align: center;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
.companyDescribe {
  padding-bottom: 200px;
  height: 850px;
  position: relative;
  .el-row {
    .left {
      padding-top: 120px;
      padding-right: 50px;
      h1 {
        font-size: 35px;
        color: rgba(23, 22, 22, 0.93);
        margin-bottom: 0px;
      }
      p {
        margin-top: 10px;
        margin-bottom: 40px;
        font-size: 23px;
        color: grey;
      }
      .describeContent {
        color: grey;
        line-height: 35px;
      }
    }
    .right {
      position: relative;
      .imgCanvas {
        width: 80%;
        height: 80%;
        position: absolute;
        top: 80px;
        left: 60px;
        z-index: 2;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .shadowCanvas {
        width: 80%;
        height: 80%;
        border: 5px solid #ffc400;
        position: absolute;
        top: 110px;
        left: 90px;
        z-index: 1;
      }
    }
  }
  .describeBottomBox {
    width: 64%;
    height: 200px;
    position: absolute;
    bottom: -100px;
    left: 17%;
    background-color: white;
    box-shadow: 0px 0px 15px #d0d0d0;
    .el-col {
      height: 200px;
    }
    .text {
      color: #3d3d3d;
      font-size: 50px;
      text-align: center;
      padding-top: 50px;
      span {
        position: relative;
      }
      .logo {
        width: 20px;
        height: 20px;
        text-align: left;
        font-size: 18px;
        color: #ffc400;
        position: absolute;
        right: -25px;
        top: 0;
      }
    }
    .label {
      text-align: center;
      line-height: 50px;
      color: gray;
    }
  }
}
.companyDevelop{
  background-color: rgba(241,241,241,0.93);
  background-image: url("../../assets/devolopBack.jpg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom;
  height: 1000px;
  padding-top: 150px;
  h1 {
    font-size: 35px;
    color: rgba(23, 22, 22, 0.93);
    text-align: center;
  }
}
.companyAddr{
  height: 700px;
}
.loginBtn {
  width: 50px;
  height: 50px;
  border-radius: 25px;
  background-color: rgba(255,202,60,0.93);
  position: fixed;
  right: 30px;
  bottom: 100px;
  font-size: 25px;
  text-align: center;
  line-height: 48px;
  color: white;
  font-weight: 900;
  cursor: pointer;
  transition-property: all;
  transition-duration: 0.2s;
  .text {
    font-size: 16px;
    font-weight: 600;
    line-height: 30px;
    display: inline-block;
    display: none;
    vertical-align: middle;
  }
}
.loginBtn:hover {
  width: 100px;
  border-radius: 3px;
  .text {
    display: inline-block;
  }
}
</style>
